<template>
  <div id="about">
    <my-header>{{ this.title }}</my-header>
    <input type="text" @keyup.enter="submit" v-model="value">
    <ul>
      <li v-for="item in list" :style="{background:item.bg}" @click="ever(item)">
      </li>
    </ul>
    <button class="bb" :disabled="sub">{{btn}}</button>
    <div id="box">
      <div class="dv" :style="{top:t,left:l}" @click="pos">

      </div>
    </div>
  </div>
</template>
<script>
import myHeader from "@/components/header/titile";

export default {
  name: '',
  props: {},
  data() {
    return {
      btn:'再想想',
      sub:'ture',
      t:'',
      l:'',
      title: '',
      value: [],
      list: [
        {bg: 'red'},
        {bg: 'yellow'},
        {bg: '#1234ff'},
        {bg: '#123123'},
      ],
    };
  },
  // 子组件转换
  components: {myHeader},
  // 数据引入
  mounted() {
    console.log(localStorage.getItem('token'))
    this.title = this.$store.state.username
    this.title = localStorage.getItem('token')
  },
  created() {
  },
  //点击函数事件
  methods: {
    ever(item){

    },
    submit() {
    },
    pos(){
      console.log(document.documentElement.offsetWidth)
      console.log(document.documentElement.offsetHeight)
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
#about {
  width: 100%;
  overflow: hidden;
}

input {
  width: 90vw;
  height: 10vw;
}

ul {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;

  li {
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
  }
}

#box {
  margin:30px auto 0;
  width: 99vw;
  height: 99vw;
  position: relative;
  border: 1px solid #42b983;
  box-sizing: border-box;
  .dv{
    position: absolute;
  }
}
</style>
